<!-- 
    国际化
 -->
 <template>
    <el-dropdown @command="chegeSize" trigger="click">
        <span style="color:cornflowerblue;cursor: pointer;">
            {{locale=="zh" ? "中文" : "English" }}
            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="zh" :disabled="locale == 'zh'">中文</el-dropdown-item>
            <el-dropdown-item command="en" :disabled="locale == 'en'">English</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
 </template>

 <script lang="ts" setup>
import { ref,watch } from 'vue';
import { ArrowDown } from '@element-plus/icons-vue'
import { useI18n } from 'vue-i18n';
import { ElMessage } from 'element-plus';
const { locale } = useI18n()
let zhEn = ref(localStorage.getItem('locale') || 'zh')
  // 中英文切换
const chegeSize = (e : string)=>{
  // 传递参数实现中英文切换
  zhEn.value = e
  localStorage.setItem("locale",e)
  locale.value = e
  ElMessage.success("设置成功！")
}
// 防止刷新没有对应中英文切换
locale.value = localStorage.getItem('locale') || 'zh'

 </script>

 <style lang="less" scoped>
    .el-dropdown{
      height: 100%;
      line-height: 22px;
      .el-icon--right{
      vertical-align: -2px;
    }
    }
 </style>